<template>
  <div class="list">
    <div class="like">
       <span v-for="(item,index) in like" :key="index" :class="{active: currentIndex == index }"  @click="handleClick(index)" class="btn">{{item}}</span>
    </div>
    <div class="shop" v-for="(item,index) in list" :key="index">
        <div class="imgbox">
            <img :src="item.pic" alt="">
        </div>
        <div class="text">
            <div class="name">{{item.name}}</div>
            <div class="saled">月售 {{item.saled}} 件</div>
            <div class="km"> {{item.km}}km</div>
        </div>
    </div>
  </div>
</template>

<script>
var pic = 'https://pic4.zhimg.com/50/v2-10d0d66ff7f21712f76207602638a902_hd.jpg?source=1940ef5c';
export default {
    data(){
        return {
            currentIndex: 0,
            list:[
                {pic,name:'作业店',saled:888,km:1},
                {pic,name:'真的馆',saled:6666,km:2},
                {pic,name:'好多店',saled:7777,km:3},
            ],
            like:["综合排序","距离最近","销量最高","筛选"]
        }
    },
    methods:{
        handleClick(index){
            this.currentIndex = index;
             if( index == 1 ){
                this.list.sort((a,b)=>{
                    return a.saled - b.saled;
                })
            }
            else if( index == 2 ){ 
                this.list.sort((a,b)=>{
                    return b.km - a.km;
                })
            }
        }
        
    }
}
</script>

<style lang='scss' scoped>
.list .shop{
    margin: 10px;
    display: flex;
}
.list .shop .imgbox{
    width: 80px;
    margin-right: 10px;
}
.list .shop .imgbox img{
    width: 100%;
}
.list .shop .text{
    flex: 1;
    font-size: 14px;
}
.list .shop .text .name{
    font-weight: bold;
}
.list .like{
    display: flex;
    justify-content: space-evenly;
}
.list .like span{
    width: 20%;
    height: 30px;
    font-size: 16px;
}
.active{
    color: red;
    width: 25%;
    font-size: 20px;
}
</style>